<template>
  <div class="HospitalManagement">
    <div class="title">
      <h3>会员</h3>
    </div>
    <div v-if="activeModel=='0'" class="ment-div-form">
      <el-form ref="formData" :model="formData">
        <el-row>
          <el-col :span="15">
            &nbsp;
          </el-col>
          <el-col :span="3">
            <el-input
              v-model.trim="formData.keySearch"
              class="ele-input"
              suffix-icon="el-icon-search"
              placeholder="请输入名称或手机号搜索"
              @keyup.native="replaceSpace"
            />
          </el-col>
          <el-col :span="3">
            <el-button type="primary" class="ele-btn-submit" @click="search">确认</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" class="ele-btn-submit" @click="addMember">添加会员</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-tabs v-model="activeModel" @tab-click="handleTabClidk">
      <el-tab-pane label="会员列表" name="0">
        <el-table
          ref="elTable"
          v-loading="listLoading"
          :data="list"
          :fit="true"
          element-loading-text="正在查询中。。。"
        >
          <el-table-column label="姓名" prop="nickName" />
          <el-table-column label="手机号码" prop="mobile" />
          <el-table-column label="会员等级" prop="vipLevelName" />
          <el-table-column label="会员名称" prop="vipName" />
          <el-table-column label="添加时间" prop="addTime" />
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleUpdateMember(scope.row)">编辑</el-button>
              <el-button
                type="text"
                class="deleteBtn"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="会员等级" name="1">
        <el-table
          ref="elLevelTable"
          v-loading="listLoading"
          :data="levelList"
          :fit="true"
          element-loading-text="正在查询中。。。"
        >
          <el-table-column label="等级" prop="vipLevelName" />
          <el-table-column label="等级名称" prop="vipName" />
          <el-table-column label="状态" prop="useFlag">
            <template slot-scope="scope">
              <span v-if="scope.row.useFlag==0">未启用</span>
              <span v-else-if="scope.row.useFlag==1">启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button
                v-if="scope.row.useFlag==1"
                type="text"
                class="deleteBtn"
                @click="handleStop(scope.row)"
              >停用
              </el-button>
              <el-button
                v-if="scope.row.useFlag==0&&scope.row.vipName=='————'"
                type="text"
                class="deleteBtn"
                @click="handleUpdate(scope.row)"
              >待配置
              </el-button>
              <el-button
                v-if="scope.row.useFlag==0&&scope.row.vipName!='————'"
                type="text"
                class="deleteBtn"
                @click="handleStart(scope.row)"
              >启用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div v-if="activeModel=='0'" class="footer">
      <div class="footer-left">
        <!--        <el-button plain size="small" @click="allSelection">全选</el-button>
        <el-button plain size="small" @click="delHospital">删除</el-button>-->
      </div>
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
    <div v-else-if="activeModel=='1'" class="footer">
      <div class="footer-left">
        <el-button type="text" @click="addLevel">添加会员等级</el-button>
      </div>
    </div>
  </div>
</template>

<script>
/** 医生管理 */
import { getToken } from '@/utils/auth'
import {
  addVipLevel,
  deleteVipUserById,
  modifyVipLevel,
  vipLevelList,
  vipUserList
} from '@/api/customAPI/shop/vipManage'

export default {
  name: 'VipManagement',
  data() {
    return {
      form: {
        page: 1,
        limit: 20,
        keyword: ''
      },
      formData: {
        shopId: localStorage.getItem('shopId'),
        keySearch: ''
      },
      list: [],
      levelList: [],
      selectList: [],
      listLoading: true,
      total: 0,
      page: 1,
      limit: 20,
      activeModel: '0'
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.reloadTableData()
  },
  methods: {
    handleTabClidk() {
      switch (this.activeModel) {
        case '0':
          this.resetFormData()
          break
        case '1':
          this.getLevelList()
          break
      }
    },
    /** 替换空格*/
    replaceSpace() {
      this.formData.keySearch = this.formData.keySearch.replace(/\s*/g, '')
    },
    /** 页码加载初始化*/
    resetFormData() {
      this.$refs.formData.resetFields()
      this.reloadTableData()
    },
    search() {
      this.reloadTableData()
    },
    pageSizeChange(pageSize) {
      this.limit = pageSize
      this.getList()
    },
    currentPageChange(page) {
      this.page = page

      this.getList()
    },
    reloadTableData() {
      this.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },

    changedAddress() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.formData.allCity = false
      } else {
        vm.formData.allCity = true
      }
    },
    /** 获取vip用户列表*/
    getList() {
      const data = {
        page: this.page,
        limit: this.limit
      }
      if (this.formData.keySearch) {
        data['keySearch'] = this.formData.keySearch
      }
      this.listLoading = true
      vipUserList(data).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    /* handleFilter() {
      this.formData.page = 1
      this.formData.address = {
        shengId: this.shengId,
        sheng: this.sheng,
        shiId: this.shiId,
        shi: this.shi
      }
      this.getList()
    },*/
    /** 添加会员*/
    addMember() {
      this.$router.push({
        name: 'addMember',
        query: {
          p: this.$ed({
            state: 'add'
          })
        }
      })
    },
    handleUpdateMember(row) {
      this.$router.push({
        name: 'editMember',
        query: {
          p: this.$ed({
            row: row,
            state: 'edit'
          })
        }
      })
    },
    /** 编辑*/
    handleUpdate(row) {
      this.$router.push({
        name: 'editLevel',
        query: {
          p: this.$ed({
            row: row
          })
        }
      })
    },

    /** 停用会员等级*/
    handleStop(row) {
      this.$confirm('是否停用该会员等级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyVipLevel({ id: row.id, vipName: row.vipName, useFlag: '0' }).then(response => {
          this.$notify.success({
            title: '成功',
            message: '停用成功'
          })
          this.getLevelList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '停用异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '异常',
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    /** 启用会员等级*/
    handleStart(row) {
      this.$confirm('是否启用该会员等级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyVipLevel({ id: row.id, vipName: row.vipName, useFlag: '1' }).then(response => {
          this.$notify.success({
            title: '成功',
            message: '启用成功'
          })
          this.getLevelList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '启用异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '异常',
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    /** 删除会员*/
    handleDelete(row) {
      this.$confirm('是否删除该会员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteVipUserById(row.id).then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getLevelList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '删除异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '异常',
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    /** 添加会员等级*/
    addLevel() {
      addVipLevel({
        vipName: '————'
      }).then(res => {
        this.$message.success('添加会员等级成功')
        this.getLevelList()
      }).catch(res => {
        console.log('添加会员等级失败')
      })
    },
    getLevelList() {
      vipLevelList({
        page: 1,
        limit: 0
      }).then(res => {
        this.levelList = res.data.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.HospitalManagement {
  padding: 50px 100px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
  ::v-deep .el-button {
    height: 36px;
  }
}
.deleteBtn {
  color: #ff0000;
}
::v-deep .el-table__body .el-table-column--selection .cell {
  padding-left: 10px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 100px 0px;
  .footer-left {
    ::v-deep.el-button {
      width: 100px;
      margin: 0px;
    }
  }
}
</style>
